import*as e from"../../../core/platform/platform.js";import*as t from"../helpers/helpers.js";import*as o from"../render_coordinator/render_coordinator.js";import*as n from"../../lit-html/lit-html.js";import*as s from"../dialogs/dialogs.js";const r=new CSSStyleSheet;r.replaceSync(":host{--override-transparent:rgb(0 0 0/0%);border-radius:3px;width:fit-content;display:flex;align-items:center;background-color:var(--override-menu-background-color,var(--color-background))}:host([has-open-dialog]){background-color:var(--override-menu-active-background-color,var(--color-background-elevation-2))}#container{list-style-type:none;margin:0;padding:0;width:fit-content;display:block}#container:focus{outline:none}@keyframes slideIn{from{transform:var(--translate-dialog);opacity:0%}to{transform:none;opacity:100%}}\n/*# sourceURL=menu.css */\n");const i=new CSSStyleSheet;i.replaceSync(".menu-group-label{margin:4px 30px 4px 10px;font-size:12px;line-height:16px;position:relative;color:var(--color-text-secondary);display:block}\n/*# sourceURL=menuGroup.css */\n");const d=new CSSStyleSheet;d.replaceSync('.menu-item{padding:4px 30px 4px calc(10px + var(--menu-checkmark-width));font-size:12px;line-height:16px;position:relative;display:block;color:var(--color-text-primary)}.menu-item:focus{outline:none}:host(:not(:first-child)) .menu-item{border-top:var(--override-divider-line)}:host-context(devtools-menu-group) .menu-item{padding:4px 30px 4px 36px}.is-selected-item::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);display:inline-block;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;width:calc(var(--menu-checkmark-width) - 10px);height:var(--menu-checkmark-height);mask-image:var(--selected-item-check);-webkit-mask-image:var(--selected-item-check);background:var(--color-text-secondary)}:host(:hover:not(.prevents-close)) .menu-item,\n:host(:focus-visible:not(.prevents-close)) .menu-item{background:var(--color-background-elevation-2)}:host(:focus){outline:none}\n/*# sourceURL=menuItem.css */\n');const l=o.RenderCoordinator.RenderCoordinator.instance(),a=new URL("../../../Images/checkmark.svg",import.meta.url).toString();class h extends HTMLElement{static litTagName=n.literal`devtools-menu`;#e=this.attachShadow({mode:"open"});#t=this.#o.bind(this);#n=null;#s=!1;#r={origin:null,open:!1,position:"auto",showConnector:!1,showDivider:!1,showSelectedItem:!0,horizontalAlignment:"auto",getConnectorCustomXPosition:null};get origin(){return this.#r.origin}set origin(e){this.#r.origin=e,t.ScheduledRender.scheduleRender(this,this.#t)}get open(){return this.#r.open}set open(e){e!==this.open&&(this.#r.open=e,this.toggleAttribute("has-open-dialog",this.open),this.#i().setDialogVisible(this.open),t.ScheduledRender.scheduleRender(this,this.#t))}get position(){return this.#r.position}set position(e){this.#r.position=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showConnector(){return this.#r.showConnector}set showConnector(e){this.#r.showConnector=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showDivider(){return this.#r.showDivider}set showDivider(e){this.#r.showDivider=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showSelectedItem(){return this.#r.showSelectedItem}set showSelectedItem(e){this.#r.showSelectedItem=e,t.ScheduledRender.scheduleRender(this,this.#t)}get horizontalAlignment(){return this.#r.horizontalAlignment}set horizontalAlignment(e){this.#r.horizontalAlignment=e,t.ScheduledRender.scheduleRender(this,this.#t)}get getConnectorCustomXPosition(){return this.#r.getConnectorCustomXPosition}set getConnectorCustomXPosition(e){this.#r.getConnectorCustomXPosition=e,t.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.#e.adoptedStyleSheets=[r],l.write((()=>{t.SetCSSProperty.set(this,"--selected-item-check",`url(${a})`),t.SetCSSProperty.set(this,"--menu-checkmark-width",this.#r.showSelectedItem?"26px":"0px"),t.SetCSSProperty.set(this,"--menu-checkmark-height",this.#r.showSelectedItem?"12px":"0px");const e=this.showDivider?"1px var(--divider-line) solid":"none";t.SetCSSProperty.set(this,"--override-divider-line",e)}))}#i(){if(!this.#n)throw new Error("Dialog not found");return this.#n}async#d(){await l.write((()=>{this.setAttribute("has-open-dialog","has-open-dialog");const e=this.#e.querySelector("#container");e instanceof HTMLElement&&e.focus()}))}#l(){this.#a().focus()}#a(){const e=this.#e.querySelector("slot")?.assignedElements();let t=e[0];if(t instanceof HTMLSlotElement&&(t=t?.assignedElements()[0]),t instanceof u){const e=t.shadowRoot?.querySelector("slot");t=e?.assignedElements()[0]}if(t instanceof HTMLElement)return t;throw new Error("First item not found")}#h(e){const t=e.composedPath();if(e.stopPropagation(),t.find((e=>e instanceof HTMLInputElement)))return;const o=e.composedPath().find((e=>e instanceof c));o instanceof c&&this.#c(o)}#u(t){const o=t.key;t.stopImmediatePropagation();let n=t.target;const s=t.composedPath(),r="ArrowDown"===o||"ArrowRight"===o;return!this.#s&&r?(this.#l(),void(this.#s=!0)):this.#s||"ArrowUp"!==o?void((n instanceof c||(n=s.find((e=>e instanceof c)),n instanceof c))&&(e.KeyboardUtilities.keyIsArrowKey(o)?this.#p(o,n):"Home"===o?this.#m(n):"End"===o?this.#w():"Enter"===o||"Space"===t.code?this.#c(n):"Escape"===o&&(t.preventDefault(),this.#g()))):(this.#w(),void(this.#s=!0))}#c(e){""!==e.value&&(this.dispatchEvent(new p(e.value)),e.preventMenuCloseOnSelection||this.#g())}#p(e,t){let o=t;"ArrowDown"===e?(o=t.nextElementSibling,null===o&&t.parentElement instanceof u&&(o=this.#b(t))):"ArrowUp"===e&&(o=t.previousElementSibling,null===o&&t.parentElement instanceof u&&(o=this.#v(t))),o instanceof c&&o.focus()}#b(e){const t=e.parentElement;if(!(t instanceof u))return null;const o=t.nextElementSibling;if(o instanceof c)return o;if(!(o instanceof u))return null;for(const e of o.children)if(e instanceof c)return e;return null}#v(e){const t=e.parentElement;if(!(t instanceof u))return null;const o=t.previousElementSibling;return o instanceof c?o:o instanceof u&&o.lastElementChild instanceof c?o.lastElementChild:null}#m(e){let t=e;for(e.parentElement instanceof u&&(t=e.parentElement);t?.previousElementSibling;)t=t?.previousElementSibling;if(t instanceof c)t.focus();else for(const e of t.children)if(e instanceof c)return void e.focus()}#w(){const e=this.#a();let t=e;for(e.parentElement instanceof u&&(t=e.parentElement);t?.nextElementSibling;)t=t?.nextElementSibling;t instanceof c?t.focus():t instanceof u&&t.lastElementChild instanceof c&&t.lastElementChild.focus()}#g(e){e&&e.stopImmediatePropagation(),this.dispatchEvent(new m),this.#i().setDialogVisible(!1),this.#s=!1}async#o(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("Menu render was not scheduled");n.render(n.html` <${s.Dialog.Dialog.litTagName} @clickoutsidedialog="${this.#g}" @forceddialogclose="${this.#g}" .position="${this.position}" .showConnector="${this.showConnector}" .origin="${this.origin}" .dialogShownCallback="${this.#d.bind(this)}" .horizontalAlignment="${this.horizontalAlignment}" .getConnectorCustomXPosition="${this.getConnectorCustomXPosition}" on-render="${t.Directives.nodeRenderedCallback((e=>{this.#n=e}))}"> <span id="container" role="menu" tabIndex="0" @keydown="${this.#u}"> <slot @click="${this.#h}"> </slot> </span> </${s.Dialog.Dialog.litTagName}> `,this.#e,{host:this})}}class c extends HTMLElement{static litTagName=n.literal`devtools-menu-item`;#e=this.attachShadow({mode:"open"});#t=this.#o.bind(this);connectedCallback(){this.#e.adoptedStyleSheets=[d],this.tabIndex=0,this.setAttribute("role","menuitem")}#r={value:"",preventMenuCloseOnSelection:!1,selected:!1};get preventMenuCloseOnSelection(){return this.#r.preventMenuCloseOnSelection}set preventMenuCloseOnSelection(e){this.#r.preventMenuCloseOnSelection=e,t.ScheduledRender.scheduleRender(this,this.#t)}get value(){return this.#r.value}set value(e){this.#r.value=e,t.ScheduledRender.scheduleRender(this,this.#t)}get selected(){return this.#r.selected}set selected(e){this.#r.selected=e,t.ScheduledRender.scheduleRender(this,this.#t)}async#o(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("MenuItem render was not scheduled");n.render(n.html` <span class="${n.Directives.classMap({"menu-item":!0,"is-selected-item":this.selected,"prevents-close":this.preventMenuCloseOnSelection})}"> <slot></slot> </span> `,this.#e,{host:this})}}class u extends HTMLElement{static litTagName=n.literal`devtools-menu-group`;#e=this.attachShadow({mode:"open"});#t=this.#o.bind(this);connectedCallback(){this.#e.adoptedStyleSheets=[i]}#r={name:null};get name(){return this.#r.name}set name(e){this.#r.name=e,t.ScheduledRender.scheduleRender(this,this.#t)}async#o(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("MenuGroup render was not scheduled");n.render(n.html` <span class="menu-group"> <span class="menu-group-label">${this.name}</span> <slot></slot> </span> `,this.#e,{host:this})}}t.CustomElements.defineComponent("devtools-menu",h),t.CustomElements.defineComponent("devtools-menu-item",c),t.CustomElements.defineComponent("devtools-menu-group",u);class p extends Event{itemValue;static eventName="menuitemselected";constructor(e){super(p.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}}class m extends Event{static eventName="menucloserequest";constructor(){super(m.eventName,{bubbles:!0,composed:!0})}}var w=Object.freeze({__proto__:null,Menu:h,MenuItem:c,MenuGroup:u,MenuItemSelectedEvent:p,MenuCloseRequest:m});const g=new CSSStyleSheet;g.replaceSync(":host{--override-transparent:rgb(0 0 0/0%);border:1px solid var(--color-input-outline);border-radius:3px;width:fit-content;display:flex;align-items:center;background-color:var(--override-select-menu-background-color,var(--color-background))}:host([has-open-dialog]){background-color:var(--override-select-menu-active-background-color,var(--color-background-elevation-2))}button{background:none}#side-button{border:1px solid var(--override-select-menu-border,var(--color-background-elevation-2));border-radius:3px 0 0 3px;border-right:none;height:100%;position:relative;padding:var(--override-select-button-padding)}button:disabled{cursor:not-allowed}@keyframes slideIn{from{transform:var(--translate-dialog);opacity:0%}to{transform:none;opacity:100%}}\n/*# sourceURL=selectMenu.css */\n");const b=new CSSStyleSheet;b.replaceSync(':host{height:100%;width:100%;display:block}.show{font-size:12px;color:var(--color-text-primary);height:100%;width:100%;border:none;border-radius:var(--override-select-menu-show-button-border-radius);padding:var(--override-select-menu-show-button-padding,1px 6px)}.show:focus-visible{outline:1px auto var(--override-select-menu-show-button-outline,-webkit-focus-ring-color)}#button-label-wrapper{display:flex;justify-content:space-around;align-items:center}#label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:fit-content;height:100%}#label[witharrow].single-arrow{padding:0}#label[witharrow]{padding:var(--override-select-menu-label-with-arrow-padding,0 10px 0 0);text-align:left}.single-arrow + span#arrow{margin:0}#arrow{mask-image:var(--deploy-menu-arrow);-webkit-mask-image:var(--deploy-menu-arrow);-webkit-mask-position-y:center;margin-left:5px;width:14px;flex-shrink:0;height:14px;display:inline-block;-webkit-mask-repeat:no-repeat;background-color:var(--override-throttling-icon-and-text-color,var(--override-select-menu-arrow-color,var(--color-text-primary)));transform:rotate(var(--arrow-angle));transform-origin:center;mask-repeat:no-repeat;transition:200ms}.single-arrow{border-radius:0 3px 3px 0;border:1px solid var(--override-select-menu-border,var(--color-background-elevation-2));height:100%;aspect-ratio:1/1;padding:0;display:flex;justify-content:center;align-items:center}button[aria-expanded="true"] #arrow{transform:rotate(calc(var(--arrow-angle) + 180deg))}button{background:none}button[disabled]{color:var(--color-input-outline-disabled)}\n/*# sourceURL=selectMenuButton.css */\n');const v=o.RenderCoordinator.RenderCoordinator.instance(),S=new URL("../../../Images/triangle-down.svg",import.meta.url).toString();class f extends HTMLElement{static litTagName=n.literal`devtools-select-menu`;#e=this.attachShadow({mode:"open"});#t=this.#o.bind(this);#S=null;#f=!1;#r={buttonTitle:"",position:"bottom",horizontalAlignment:"auto",showArrow:!1,showConnector:!1,sideButton:!1,showDivider:!1,disabled:!1,showSelectedItem:!0};get buttonTitle(){return this.#r.buttonTitle}set buttonTitle(e){this.#r.buttonTitle=e,t.ScheduledRender.scheduleRender(this,this.#t)}get position(){return this.#r.position}set position(e){this.#r.position=e,t.ScheduledRender.scheduleRender(this,this.#t)}get horizontalAlignment(){return this.#r.horizontalAlignment}set horizontalAlignment(e){this.#r.horizontalAlignment=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showConnector(){return this.#r.showConnector}set showConnector(e){this.#r.showArrow||(this.#r.showArrow=e),this.#r.showConnector=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showArrow(){return this.#r.showArrow}set showArrow(e){this.#r.showArrow=e,t.ScheduledRender.scheduleRender(this,this.#t)}get sideButton(){return this.#r.sideButton}set sideButton(e){this.#r.sideButton=e,t.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#r.disabled}set disabled(e){this.#r.disabled=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showDivider(){return this.#r.showDivider}set showDivider(e){this.#r.showDivider=e,t.ScheduledRender.scheduleRender(this,this.#t)}get showSelectedItem(){return this.#r.showSelectedItem}set showSelectedItem(e){this.#r.showSelectedItem=e,t.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.#e.adoptedStyleSheets=[g]}#k(){if(!this.#S&&(this.#S=this.#e.querySelector("devtools-select-menu-button"),!this.#S))throw new Error("Arrow not found");return this.#S}#C(){this.#f=!0,this.setAttribute("has-open-dialog","has-open-dialog"),t.ScheduledRender.scheduleRender(this,this.#t)}click(){this.#k().click()}#y(){this.dispatchEvent(new y)}#R(){if(this.showConnector){const e=this.#k().getBoundingClientRect();return(e.left+e.right)/2}}#x(){return this.buttonTitle instanceof Function?this.buttonTitle():this.buttonTitle}#E(){const e=this.#x();return this.sideButton?n.html` <button id="side-button" @click="${this.#y}" ?disabled="${this.disabled}"> ${e} </button> <${k.litTagName} @click="${this.#C}" @selectmenubuttontrigger="${this.#C}" .singleArrow="${!0}" .open="${this.#f}" .showArrow="${!0}" .arrowDirection="${this.position}" .disabled="${this.disabled}"> </${k.litTagName}> `:n.html` <${k.litTagName} @selectmenubuttontrigger="${this.#C}" .open="${this.#f}" .showArrow="${this.showArrow}" .arrowDirection="${this.position}" .disabled="${this.disabled}"> ${e} </${k.litTagName}> `}#B(e){e&&e.stopImmediatePropagation(),v.write((()=>{this.removeAttribute("has-open-dialog")})),this.#f=!1,t.ScheduledRender.scheduleRender(this,this.#t)}#D(e){this.dispatchEvent(new C(e.itemValue))}async#o(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenu render was not scheduled");n.render(n.html` <${h.litTagName} @menucloserequest="${this.#B}" @menuitemselected="${this.#D}" .position="${this.position}" .origin="${this}" .showConnector="${this.showConnector}" .showDivider="${this.showDivider}" .showSelectedItem="${this.showSelectedItem}" .open="${this.#f}" .getConnectorCustomXPosition="${this.#R.bind(this)}"> <slot> </slot> </${h.litTagName}> ${this.#E()} `,this.#e,{host:this})}}class k extends HTMLElement{static litTagName=n.literal`devtools-select-menu-button`;#e=this.attachShadow({mode:"open"});#t=this.#o.bind(this);#I=null;connectedCallback(){this.#e.adoptedStyleSheets=[b],t.SetCSSProperty.set(this,"--deploy-menu-arrow",`url(${S})`),v.write((()=>{switch(this.arrowDirection){case"auto":case"top":t.SetCSSProperty.set(this,"--arrow-angle","180deg");break;case"bottom":t.SetCSSProperty.set(this,"--arrow-angle","0deg");break;default:e.assertNever(this.arrowDirection,`Unknown position type: ${this.arrowDirection}`)}}))}#r={showArrow:!1,arrowDirection:"bottom",disabled:!1,singleArrow:!1};get showArrow(){return this.#r.showArrow}set showArrow(e){this.#r.showArrow=e,t.ScheduledRender.scheduleRender(this,this.#t)}get arrowDirection(){return this.#r.arrowDirection}set arrowDirection(e){this.#r.arrowDirection=e,t.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#r.disabled}set disabled(e){this.#r.disabled=e,t.ScheduledRender.scheduleRender(this,this.#t)}set open(e){v.write((()=>{this.#$()?.setAttribute("aria-expanded",String(e))}))}set singleArrow(e){this.#r.singleArrow=e,t.ScheduledRender.scheduleRender(this,this.#t)}click(){this.#$()?.click()}#$(){return this.#I||(this.#I=this.#e.querySelector("button")),this.#I}#A(t){const o=t.key,n="bottom"===this.arrowDirection&&"ArrowDown"===o,s="top"===this.arrowDirection&&"ArrowUp"===o,r=o===e.KeyboardUtilities.ENTER_KEY,i="Space"===t.code;(n||s||r||i)&&(this.dispatchEvent(new R),t.preventDefault())}#M(){this.dispatchEvent(new R)}async#o(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenuItem render was not scheduled");const e=this.#r.showArrow?n.html`<span id="arrow"></span>`:n.nothing,o={"single-arrow":this.#r.singleArrow},s=n.html` <span id="button-label-wrapper"> <span id="label" ?witharrow="${this.showArrow}" class="${n.Directives.classMap(o)}"><slot></slot></span> ${e} </span> `;n.render(n.html` <button aria-haspopup="true" aria-expanded="false" class="show" @keydown="${this.#A}" @click="${this.#M}" ?disabled="${this.disabled}">${s}</button> `,this.#e,{host:this})}}t.CustomElements.defineComponent("devtools-select-menu",f),t.CustomElements.defineComponent("devtools-select-menu-button",k);class C extends Event{itemValue;static eventName="selectmenuselected";constructor(e){super(C.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}}class y extends Event{static eventName="selectmenusidebuttonclick";constructor(){super(y.eventName,{bubbles:!0,composed:!0})}}class R extends Event{static eventName="selectmenubuttontrigger";constructor(){super(R.eventName,{bubbles:!0,composed:!0})}}var x=Object.freeze({__proto__:null,SelectMenu:f,SelectMenuButton:k,SelectMenuItemSelectedEvent:C,SelectMenuSideButtonClickEvent:y,SelectMenuButtonTriggerEvent:R,SelectMenuGroup:u});export{w as Menu,x as SelectMenu};
